<!-- home -->
<template>
  <div class="container">
    <div class="header">
      <div class="header-text">
        <img
          src="https://avatar-static.segmentfault.com/356/741/3567416821-5682a04aec255_big64"
          alt=""
          class="header-avator"
        />
        <div>邹格列</div>
      </div>
    </div>
    <div class="list">
      <van-cell-group inset>
        <van-cell title="个人信息" is-link />
        <van-cell title="身份认证" label="待审核" is-link />
      </van-cell-group>
    </div>
  </div>
</template>

<script>
// 请求接口
import { getUserInfo } from '@/api/user.js'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      wechat: `${this.$cdn}/wx/640.gif`
    }
  },
  computed: {
    ...mapGetters(['userName'])
  },
  mounted() {
    this.initData()
  },
  methods: {
    // 请求数据案例
    initData() {
      // 请求接口数据，仅作为展示，需要配置src->config下环境文件
      const params = { user: 'sunnie' }
      // getUserInfo(params)
      //   .then(() => {})
      //   .catch(() => {})
    },
    // Action 通过 store.dispatch 方法触发
    doDispatch() {
      this.$store.dispatch('setUserName', '真乖，赶紧关注公众号，组织都在等你~')
    },
    goGithub(index) {
      window.location.href = 'https://github.com/sunniejs/vue-h5-template'
    }
  }
}
</script>
<style lang="scss">
body {
  background: #f6f6f6;
}
.header {
  background: url(~@/assets/bg2.png) center center no-repeat;
  width: 100%;
  height: 240px;
  &-text {
    text-align: center;
    color: white;
    font-size: 26px;
    font-weight: 400;
  }
  &-avator {
    margin: 25px auto 20px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    // border: 3px solid #fff;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
  }
}
.list {
  margin-top: -45px;
}
.about-container {
  /* 你的命名空间 */
  background: #fff;
  height: 100vh;
  box-sizing: border-box;
  .warpper {
    padding: 50px 12px 12px 12px;
    .list {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #666;
      font-size: 14px;
      .demo-home__title {
        margin: 0 0 6px;
        font-size: 32px;
        .demo-home__title img,
        .demo-home__title span {
          display: inline-block;
          vertical-align: middle;
        }
      }
      .item {
        font-size: 14px;
        line-height: 34px;
        a {
          text-decoration: underline;
        }
        .van-button {
          /* vant-ui 元素*/
          background: #ff5500;
        }
      }

      .logo {
        width: 120px;
        height: 120px;
        // background: url($cdn + '/weapp/logo.png') center / contain no-repeat;
      }
      .wechat {
        width: 200px;
        height: 200px;
        img {
          width: 100%;
          height: auto;
        }
      }
    }
  }
}
</style>
